<style lang="scss" scoped>
  td img{
    max-width: 120px;
    max-height: 60px;
  }
</style>
<template>
  <main>
    <tabs type="boxed"  animation="fade" :only-fade="false">
      <tab-pane label="我的文件">
        <h4>
           <span style="display: inline-block" class="control has-addons">
            <input class="input" v-model="param.prefix" type="text" placeholder="文件名/路径">
            <a class="button is-info" @click="getItem">查询</a>
          </span>
          <span style="float: right;">
            <span style="display: inline-block;line-height: 30px;">上传路径:</span>
            <input style="display: inline-block;width: 80px;margin:0 5px;" class="input" v-model="imagePath" type="text">
            <uploadfile ids="files" @callback="getItem" :path.sync="imagePath"></uploadfile>
          <!--<button class="button" style="margin-right:10px;float: right">批量删除</button>-->
          </span>
        </h4>
        <table class="table">
          <thead>
          <tr>
            <th>文件名</th>
            <th>链接</th>
            <th>图片</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in list" :class="{'selected': item.id == id}">
            <td>{{item.key}}</td>
            <td>{{'http://'+path+'/'+item.key}}</td>
            <td><img :src="'http://'+path+'/'+item.key" alt=""></td>
            <td class="is-icon">
              <div class="btn-group">
                    <span class="btn js-copy" :data-clipboard-text="'http://'+path+'/'+item.key">
                      复制链接
                    </span>
                    <!--<span class="btn">-->
                      <!--重命名-->
                    <!--</span>-->
                    <span class="btn" @click="deletes(item.key)">
                      删除
                    </span>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </tab-pane>
      <!--<tab-pane label="我的历史图片">-->
        <!--<h4>-->
           <!--<span style="display: inline-block" class="control has-addons">-->
            <!--<input class="input" type="text" placeholder="文件名/路径">-->
            <!--<a class="button is-info">查询</a>-->
          <!--</span>-->
          <!--<uploadfile ids="images" path="sdly"></uploadfile>-->
          <!--&lt;!&ndash;<button class="button" style="margin-right:10px;float: right">批量删除</button>&ndash;&gt;-->
        <!--</h4>-->
          <!--<table class="table">-->
            <!--<thead>-->
            <!--<tr>-->
              <!--<th>图片名</th>-->
              <!--<th>链接</th>-->
              <!--<th>操作</th>-->
            <!--</tr>-->
            <!--</thead>-->
            <!--<tbody>-->
            <!--<tr v-for="(item,index) in list" :class="{'selected': item.id == id}">-->
              <!--<td>{{item.key}}</td>-->
              <!--<td>{{'http://'+path+item.key}}</td>-->
              <!--<td class="is-icon">-->
                <!--<div class="btn-group">-->
                    <!--&lt;!&ndash;<span class="btn">&ndash;&gt;-->
                      <!--&lt;!&ndash;复制链接&ndash;&gt;-->
                    <!--&lt;!&ndash;</span>&ndash;&gt;-->
                    <!--<span class="btn">-->
                      <!--重命名-->
                    <!--</span>-->
                    <!--<span class="btn">-->
                      <!--删除-->
                    <!--</span>-->
                <!--</div>-->
              <!--</td>-->
            <!--</tr>-->
            <!--</tbody>-->
          <!--</table>-->
      <!--</tab-pane>-->
    </tabs>
  </main>
</template>

<script>
  import Vue from 'vue'
  import { Tabs, TabPane } from 'vue-bulma-tabs'
  import uploadfile from '../components/uploadfile.vue'

  import Message from 'vue-bulma-message'
  const MessageComponent = Vue.extend(Message)

  const openMessage = (propsData = {
    title: '',
    message: '',
    type: '',
    direction: '',
    duration: 1500,
    container: '.messages'
  }) => {
    return new MessageComponent({
      el: document.createElement('div'),
      propsData
    })
  }
  export default {
    data () {
      return {
        list:[],
        id:'',
        path:'',
        param:{
          prefix:'',
          marker:'',
          limit:'100',
          delimiter:''
        },
        imagePath:''
      }
    },
    methods: {
      copy (data) {

      },
      randomTabs () {
        this.items.unshift(this.items.pop())
      },
      getItem() {
        let vm = this
        let param = qs.stringify(vm.param)
        this.$http.get('file/api/files?'+param,{}).then(function(res){
          vm.list = res.data.items
          let clipboard = new Clipboard('.js-copy');//实例化

          //复制成功执行的回调，可选
          clipboard.on('success', function(e) {
            openMessage({
              title: '提示',
              message: '复制成功',
              type: 'primary'
            })
          });

          //复制失败执行的回调，可选
          clipboard.on('error', function(e) {
            openMessage({
              title: '提示',
              message: '复制失败',
              type: 'warn'
            })
          });
        })
      },
      deletes (key) {
        let vm = this
        this.$http.delete('file/api/files?key='+key,{}).then(function(res){
          vm.getItem()
        })
      },
      getPath () {
        let vm = this
        this.$http.get('file/api/domains',{}).then(function(res){
          vm.path = res.data[0]
        })
      }
    },
    computed: Object.assign({}),
    components: {
      Tabs,
      TabPane,
      uploadfile
    },
    mounted () {
      this.$parent.$parent.$refs.nav.status = false
      this.getItem()
      this.getPath()
    },
  }
</script>
